{extend name="base" /}
{block name="content"}
<div class="content">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{:url('index/index')}"><i class="fe-home"></i> 控制台</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">账户管理</a></li>
                            <li class="breadcrumb-item active">完善信息</li>
                        </ol>
                    </div>
                <h4 class="page-title"> <i class="fe-user"></i> 完善个人信息 </h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="alert alert-warning alert-dismissable">
                    <i class="mdi mdi-alert-outline mr-2"></i>
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                       请慎重修改登录账户，登录账户格式为手机号码！修改成功后菜单头像下次登录生效
                </div>  
            </div>
        </div>
        <div class="row">
        <div class="col-lg-6 col-md-6">
            <div class="card-box">
                    <form id="form1">
                    <p>基本信息</p>
                    <br/>
                    <div class="form-group row">
                        <label for="user" class="col-3 col-form-label">登录账户</label>
                        <div class="col-9">
                            <input type="text" class="form-control" id="username" placeholder="手机/账户" name="username" value="{$user['username']}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="user" class="col-3 col-form-label">真实姓名</label>
                        <div class="col-9">
                            <input type="text" class="form-control" id="nick" name="nick" placeholder="姓名" value="{$user['nick']}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="user" class="col-3 col-form-label">&nbsp;</label>
                        <div class="col-9">
                            <img class="rounded-circle vatar-xl" src="/uploads/{$user['portrait']}" id="demo1" style="width: 36px; height: 36px">
                            <input type="hidden" class="form-control" id="portrait" placeholder="上传后显示" name="portrait" value="{$user['portrait']}" readonly>
                            <button type="button" class="layui-btn layui-btn-xs" id="test1">
                                <i class="layui-icon">&#xe67c;</i>上传头像
                            </button>
                        </div>
                    </div>
                    <div class="form-group mb-0 justify-content-end row">
                        <div class="col-9">
                             <a class="btn btn-info waves-effect waves-light" style="color: #fff" onclick="postBtn()" >提交</a>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- container -->
</div> <!-- content -->
<script type="text/javascript" src="/static/app/cripts/jquery.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit','upload'], function () {
        var form = layui.form;
        var $ = layui.jquery,upload = layui.upload;

        //普通图片上传
          var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/admin/index/uploadFile'
            ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
              });
            }
            ,done: function(res){
              //如果上传失败
              if(res.code > 0){
                return layer.msg('上传失败');
              }
              //上传成功
              console.log(res.data.src)
              $('#portrait').val(res.data.src);
            }
            ,error: function(){
              //演示失败状态，并实现重传
              return layer.msg('上传失败');
            }
          });
    })
</script>
<script type="text/javascript">
    function postBtn(e){
        var data = $('#form1').serialize();
        $.post('/admin/admin/modify_info', data, function(res){
            if(res.code == 0){
                layer.msg(res.message,{icon:1, time:1000, shade: [0.2, '#000']});
            }else{
                layer.msg(res.message,{icon:5, anim: 6, time:1000, shade: [0.2, '#000']});
            }
        },'json');
    }
</script>
{/block}